<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import requestApi from "../plugins/requestApi.ts";
import TeamCardList from "../components/TeamCardList.vue";
import {TeamType} from "../models/team";
import getCurrentUser from "../states/userApi.ts";
import {CurrentUser} from "../models/user";
import "../../global.css"
import {useRouter} from "vue-router";
import {s} from "vite/dist/node/types.d-aGj9QkWt";

const teamList = ref<TeamType[]>();
const currentUser = ref<CurrentUser>();
const router = useRouter();
const searchText = ref("");
const searchTeam = ref<TeamType>({
  name: searchText.value,
  description: searchText.value,
  status: 0,
  page: 1 as number,
  pageSize: 10 as number
});
watch(() => searchText.value, (newName, oldName) => {
  searchTeam.value.name = newName;
  searchTeam.value.description = newName;
});
onMounted(async () => {
      const user = await getCurrentUser();
      if (currentUser) {
        currentUser.value = user;
      }
      const res = await requestApi.post('/team/page', searchTeam.value);
      console.log(res)
      if (res) {
        teamList.value = res;
      }
      console.log(res)
    }
)
const onSearch = () => {
  alert("搜索")
  onClickButton();
}
const clickTab = () => {
  onClickButton();
}
const onClickButton = async () => {
  const res = await requestApi.post('/team/page', searchTeam.value);
  if (res) {
    teamList.value = res;
  } else {
    alert("获取失败")
  }
}
</script>

<template>
  <van-search
      v-model="searchText"
      show-action
      placeholder="搜索队伍"
      @search="onSearch"
  >
    <template #action>
      <div @click="onClickButton">搜索</div>
    </template>
  </van-search>
  <van-tabs v-model:active="searchTeam.status" @click-tab="clickTab">
    <van-tab title="公开" name="0">
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <TeamCardList v-if="teamList" :team-list="teamList" :current-user="currentUser"/>
    </van-tab>
    <van-tab title="加密" name="2">
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <TeamCardList v-if="teamList" :team-list="teamList" :current-user="currentUser"/>
    </van-tab>
  </van-tabs>
  <van-button class="add-button" icon="plus" type="primary" @click="router.push('/team/add')" round/>
</template>

<style scoped>
.add-button {
  position: fixed;
  bottom: 110px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>